<html>
    <head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <title>Y! 氣象台 :: 偏好設定</title>
		<style>
            body {
			  font-size: 84%;
			  font-family: Arial, Helvetica, sans-serif;
			  padding: 0.75em;
			  margin: 0;
			  min-width: 45em;
			}			
			
			div#wrapper {
			  width: 80%;
			  padding: 0.75em 1em;
			  padding-top: 0.6em;
			  padding-left: 0;
			  margin: auto;
			  position: relative;
			  overflow: hidden;
			}
			div#header {
			  padding: 0.75em 1em;
			  padding-top: 0.6em;
			  padding-left: 0;
			  margin-bottom: 0.75em;
			  position: relative;
			  overflow: hidden;
			  background: #5296de;
			  -webkit-background-size: 100%;
			  border: 1px solid #3a75bd;
			  -webkit-border-radius: 6px;
			  color: white;
			}
			
			div#header h1 {
			  padding-left: 37px;
			  margin: 0;
			  display: inline;
			  background: url("") 12px 60% no-repeat;
			  color: white;
			}
			
			#header a {
				color: #FFFFFF;
			}
			
			#header a:hover {
				color: #FF7900;
			}

			
			h1 {
			  font-size: 110%;
			  font-weight: bold;
			  color: #4a8ee6;
			  padding: 0;
			  margin: 0;
			}									         
            
            .menu {				
                width: 98%;
                background: #E3E3E3;
                margin-left: auto;
                margin-right: auto;
                -webkit-border-radius: 7px;
                padding: 7px 7px 7px 7px;
            }
			
			#footer {
				width: 90%;
				height: 15px;
				margin: 0 auto;
				padding: 2px 0;
				color: #444444;
			}

			#footer p {
				margin: 0;
				line-height: normal;
				font-size: 12px;
				text-align: center;
			}

			#footer a {
				color: #666;
			}

			#footer a:hover {
				color: #FF7900;
			}

        </style>
		<script>					
            function save(location, zip, lg, unit){		
                myport = chrome.extension.connect({
                    name: 'y_weather'
                });
                myport.postMessage({
                    message: "preferences",
                    location: location,
					zip: zip,
					lg: lg,
					unit: unit,
                })
				alert('儲存成功!');									
            }
			
			function set(){
				var zip = localStorage.getItem('zip');
				var lg = localStorage.getItem('lg');
				var unit = localStorage.getItem('unit');
				if (zip != null){
					var localOptions = document.preferences.location.options;
					for(var i = 0; i < localOptions.length; i++){
						if(localOptions[i].value == zip){						
							localOptions[i].selected = true;
						}
					}					
				}
				if(lg !== null){
					var lgOptions = document.preferences.lg.options;
					for(var i = 0; i < lgOptions.length; i++){
						if(lgOptions[i].value == lg){						
							lgOptions[i].selected = true;
						}
					}
				}
				if(unit !== null){
					var unitOptions = document.preferences.unit.options;
					for(var i = 0; i < unitOptions.length; i++){
						if(unitOptions[i].value == unit){						
							unitOptions[i].selected = true;
						}
					}
				}
			}						
		</script>
	</head>
	<body onload="set()">
	<div id="wrapper">	
	<div id="header">
		<h1>Y! 氣象台 :: 偏好設定</h1>
		<div style="float: right;"><a href="http://tw.weather.yahoo.com/" target="_blank" >Yahoo!奇摩氣象</a></div>
	</div>
	<p>Y! 氣象台是使用<a href="http://developer.yahoo.com/weather/" target="_blank" >Yahoo! Weather API</a>與<a href="http://code.google.com/intl/en/apis/ajaxlanguage/" target="_blank">Google AJAX Language API</a>製作的Chrome外掛程式。瀏覽器下方的狀態列顯示各地區當下的天氣狀況，每30分鐘更新一次，讓您隨時掌握最新的氣象資訊。</p>
	<p>您可以在此頁面做個人化設定：</p>
		<form name="preferences">
            <div class="menu">
                <p>地區</p>
                <select name="location">
				<optgroup label="台灣">
					<option value="TWXX0021">台北市</option>
                    <option value="TWXX0022">台北縣</option>
					<option value="TWXX0003">基隆</option>
					<option value="TWXX0024">淡水</option>
					<option value="TWXX0004">景美</option>
					<option value="TWXX0010">新店</option>
					<option value="TWXX0025">桃園</option>
					<option value="TWXX0009">新竹</option>
					<option value="TWXX0006">竹東</option>
					<option value="TWXX0014">苗栗</option>
					<option value="TWXX0007">豐原</option>
					<option value="TWXX0019">台中</option>
					<option value="TWXX0001">彰化</option>
					<option value="TWXX0002">嘉義</option>
                    <option value="TWXX0020">台南</option>
					<option value="TWXX0013">高雄</option>                                                                             
                    <option value="TWXX0005">旗山</option>                                       
                    <option value="TWXX0008">恆春</option>                                                     
                    <option value="TWXX0012">岡山</option>
					<option value="TWXX0027">恆春</option>
					<option value="TWXX0018">南灣</option> 					
                    <option value="TWXX0015">屏東</option>					
                    <option value="TWXX0016">蘇澳</option>
                    <option value="TWXX0017">南澳</option>                  
					<option value="TWXX0011">花蓮</option>					
					<option value="TWXX0028">台東</option>					
                    <option value="TWXX0023">台東縣</option>                                        
                    <option value="TWXX0026">大武</option>
				</optgroup>
				<optgroup label="中國">
					<option value="CHXX0008">北京</option>
					<option value="CHXX0116">上海</option>
					<option value="CHXX0049">香港</option>					
				</optgroup>
				<optgroup label="亞洲">
					<option value="JAXX0085">東京</option>
					<option value="JAXX0071">大阪</option>
					<option value="JAXX0040">神戶</option>
					<option value="KSXX0037">首爾</option>
					<option value="SNXX0006">新加坡</option>
					<option value="RPXX0017">馬尼拉</option>
					<option value="VMXX0007">胡志明市</option>
					<option value="THXX0002">曼谷</option>	
				</optgroup>
				<optgroup label="其他地區">
					<option value="USNY0996">New York</option>
					<option value="USCA0987">San Francisco</option>
					<option value="USCA0638">Los Angeles</option>
					<option value="UKXX0085">London</option>
					<option value="ASXX0112">Sydney</option>
					<option value="ASXX0075">Melbourne</option>
					<option value="FRXX0076">Paris</option>
				</optgroup>									
                </select>
            </div>
            <br />
			<div class="menu">
                <p>語言</p>
                <select name="lg">
                    <option value="zh-TW">中文(繁體)</option>
                    <option value="zh-CN">中文(简体)</option>
					<option value="en">English</option>
					<option value="ja">日本語</option>
					<option value="ko">Korean</option>                   
                    <option value="fr">Français</option>
                    <option value="it">Italiano</option>
                    <option value="th">हिन्दी</option>
                    <option value="es">Español</option>
                    <option value="ru">Russian</option>
                    <option value="vi">Vietnamese</option>                                    
                </select>
            </div>
			<br />
			<div class="menu">
                <p>溫度單位</p>
                <select name="unit">
                    <option value="c">攝氏 (°C)</option>
                    <option value="f">華氏 (°F)</option>					                                  
                </select>
            </div>			
			<br />
			<center>
                <input type="button" name="Submit" value="儲存" onClick="save(this.form.location.options[this.form.location.selectedIndex].text, this.form.location.options[this.form.location.selectedIndex].value, this.form.lg.options[this.form.lg.selectedIndex].value, this.form.unit.options[this.form.unit.selectedIndex].value);">
				<input type="button" value="離開" onClick="window.close()">					
            </center>
		</form>
		</div>		
		<div id="footer">
		<p><a href="http://clay0529.blogspot.com/" target="_blank">關於我</a> |
		<a href="mailto:clay0529@gmail.com">問題回報與建議</a> | <a href="javascript:alert('Powered by Yahoo! Weather and Google AJAX Language APIs.')">版權聲明</a>
		| Copyright (c) 2009 Clay Liao. All rights reserved.</p>
		</div>
	</body>
</html>